<template>
	<view class="cardStackingDiv">
		<view class="cardStacking">
			<view class="cardStackingItem" v-for="(item,index) in cardsData" :key="item.id" :style="[
					 {'--i':`${index}`},
					 // 非顶层卡片的基础样式，增强堆叠感
					 index > 0 ? {
						 // 'opacity': `${1 - index * 0.15}`,
						 'z-index': `${10 - index}`
					 } : {}
				 ]" :class="{
					'newClass': isSwitch === item.id && swipeDirection === 'left',
					'rightClass': isSwitch === item.id && swipeDirection === 'right',
					'enter': index === 0 && isNewCard
				}" @touchstart="index === 0 && handleTouchStart($event, item.id)"
				@touchmove="index === 0 && handleTouchMove($event)"
				@touchend="index === 0 && handleTouchEnd($event, item.id)">
				<img :src="item.photo[0]" alt="卡片图片" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		chongliImpression
	} from '@/api/home.js'
	export default {
		name: "cardStacking",
		data() {
			return {
				cardsData: [],
				isSwitch: -1,
				startX: 0,
				moveX: 0,
				endX: 0,
				minSwipeDistance: 50,
				swipeDirection: '',
				isNewCard: false,
				pageNum: 1, // 当前页码
				pageSize: 10, // 每页条数
			};
		},
		mounted() {
			this.getChongliImpression()
		},
		methods: {
			// 获取崇礼印象图片列表
			async getChongliImpression() {
				let par = {
					title: '',
					type: '0',
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				let res = await chongliImpression(par)
				if (res.code == 200) {
					this.cardsData = res.data.list
				}
			},
			handleTouchStart(e, id) {
				this.startX = e.touches[0].clientX;
				this.isSwitch = -1;
				this.swipeDirection = '';
			},

			handleTouchMove(e) {
				this.moveX = e.touches[0].clientX;
			},

			handleTouchEnd(e, id) {
				this.endX = e.changedTouches[0].clientX;
				const distance = this.endX - this.startX;

				if (distance > this.minSwipeDistance) {
					this.swipeDirection = 'right';
					this.animationCardRight(id);
				} else if (distance < -this.minSwipeDistance) {
					this.swipeDirection = 'left';
					this.animationCardLeft(id);
				}
			},

			animationCardLeft(id) {
				this.isSwitch = id;
				setTimeout(() => {
					this.removeCard(id);
				}, 400);
			},

			animationCardRight(id) {
				this.isSwitch = id;
				setTimeout(() => {
					this.removeCard(id);
				}, 400);
			},

			removeCard(id) {
				const index = this.cardsData.findIndex(item => item.id === id);
				if (index !== -1) {
					// 将滑走的卡片移到末尾
					this.cardsData.push(this.cardsData[index])
					this.cardsData.splice(index, 1);
					this.isSwitch = -1;

					// 触发新卡片入场动画
					this.isNewCard = true;
					// 与入场动画时长保持一致
					setTimeout(() => {
						this.isNewCard = false;
					}, 600);
				}
			}
		}
	}
</script>

<style lang="scss">
	.cardStackingDiv {
		width: 100%;
		overflow: hidden;
		padding: 50rpx 0 30rpx;
	}

	.cardStacking {
		// margin-top: 15rpx;
		display: flex;
		position: relative;
		align-items: center;
		aspect-ratio: 1;
		perspective: 1200rpx;
		/* 增加透视距离，强化3D效果 */
		perspective-origin: center bottom;
		/* 透视点设在底部，增强翻转感 */
		transform-style: preserve-3d;

		// 向左滑动动画
		@keyframes moveLeftFade {
			0% {
				transform: translateX(calc(80rpx*var(--i))) translateZ(calc(-30rpx*var(--i))) rotate(0deg);
				opacity: 1;
			}

			100% {
				transform: translateX(-600rpx) translateZ(-100rpx) rotate(-15deg);
				opacity: 0;
			}
		}

		// 向右滑动动画
		@keyframes moveRightFade {
			0% {
				transform: translateX(calc(80rpx*var(--i))) translateZ(calc(-30rpx*var(--i))) rotate(0deg);
				opacity: 1;
			}

			100% {
				transform: translateX(600rpx) translateZ(-100rpx) rotate(15deg);
				opacity: 0;
			}
		}

		// 全新入场动画：翻转上升效果
		@keyframes flipUp {
			// 0% {
			// 	// 起始状态：底部位置，翻转90度，缩小
			// 	transform: translateX(calc(80rpx*var(--i))) translateZ(-200rpx) translateY(300rpx) rotateX(90deg) scale(0.9);
			// 	opacity: 1;
			// 	box-shadow: 0 0 0 rgba(0, 0, 0, 0);
			// }


			// 100% {
			// 	// 结束状态：顶层位置，完全展开
			// 	transform: translateX(calc(80rpx*var(--i))) translateZ(0) translateY(0) rotateX(0) scale(1);
			// 	opacity: 1;
			// 	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.2);
			// }
			0% {
				transform: translateX(-600rpx) translateZ(-100rpx) rotate(30deg);
				opacity: 1;
				box-shadow: 0 0 0 rgba(0, 0, 0, 0);
			}

			100% {
				transform: translateX(calc(80rpx*var(--i))) translateZ(calc(-30rpx*var(--i))) rotate(0deg);
				opacity: 1;
				box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.2);
			}
		}

		// 左滑动画类
		.newClass {
			animation: moveLeftFade 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
			z-index: 10;
		}

		// 右滑动画类
		.rightClass {
			animation: moveRightFade 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
			z-index: 10;
		}

		// 入场动画类
		.enter {
			animation: flipUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
			// 确保入场卡片在最上层
			z-index: 20;
		}

		.cardStackingItem {
			left: 20rpx;
			position: absolute;
			height: 670rpx;
			transform: translateX(calc(80rpx*var(--i))) translateZ(calc(-80rpx*var(--i))) translateY(calc(-20rpx*var(--i)));
			display: flex;
			align-items: center;
			// 堆叠卡片的过渡效果
			transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

			img {
				width: 500rpx;
				height: 100%;
				border-radius: 20rpx;
				user-select: none;
				box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
				// 优化3D渲染
				backface-visibility: hidden;
				transform-style: preserve-3d;
			}
		}
	}
</style>